<template>
	<view class="">
		<u-sticky>
			<view class="" style="padding: 0 28rpx;background-color: #F1F6FF;">
				<homeHeader></homeHeader>
			</view>
		</u-sticky>
		<view class="container">
			<view class="row">
				<view class="label">
					发布类型
				</view>
				<view class="value">
					<u--input placeholder="请输入姓名" value="住房" border="surround" readonly></u--input>
				</view>
			</view>
			<view class="row">
				<view class="label">
					小区名称
				</view>
				<view class="value">
					<u--input placeholder="请输入小区名称" v-model="form.name" border="surround"></u--input>
				</view>
			</view>
			<view class="row">
				<view class="label">
					户型
				</view>
				<view class="value">
					<view class="" style="display: flex;align-items: center;justify-content: space-between;">
						<u-number-box :showMinus="false" :showPlus="false" v-model="form.rooms" inputWidth="100rpx"></u-number-box>室
						<u-number-box :showMinus="false" :showPlus="false" v-model="form.hall" inputWidth="100rpx"></u-number-box>厅
						<u-number-box :showMinus="false" :showPlus="false" v-model="form.metre" inputWidth="100rpx"></u-number-box>平
					</view>
					
				</view>
			</view>
			<view class="row">
				<view class="label">
					楼层
				</view>
				<view class="value">
					<view class="" style="display: flex;align-items: center;justify-content: space-between;">
						<u-number-box :showMinus="false" :showPlus="false" v-model="form.floor" inputWidth="100rpx"></u-number-box>层，共
						<u-number-box :showMinus="false" :showPlus="false" v-model="form.total_floor" inputWidth="100rpx"></u-number-box>层
					</view>
					
				</view>
			</view>
			<view class="row">
				<view class="label">
					房屋朝向
				</view>
				<view class="value">
					<u--input placeholder="例如：坐北朝南" v-model="form.facing" border="surround"></u--input>
				</view>
			</view>
			<view class="row">
				<view class="label">
					地址
				</view>
				<view class="value">
					<u--input placeholder="请输入" v-model="form.address" border="surround"></u--input>
				</view>
			</view>
			<view class="row">
				<view class="label">
					月租金
				</view>
				<view class="value">
					<u--input placeholder="例如：2500元/月，押一付三等" v-model="form.price" border="surround"></u--input>
				</view>
			</view>
			<view class="row">
				<view class="label">
					设施
				</view>
				<view class="value-row">
					<u-checkbox-group
					            v-model="form.facilities"
					            placement="row"
					        >
					            <u-checkbox
									size="40rpx"
									labelSize="26rpx"
									iconSize="20rpx"
									shape="circle"
					                v-for="(item, index) in facilitiesDicData"
					                :key="index"
					                :label="item.label"
					                :name="item.label"
					            >
					            </u-checkbox>
					        </u-checkbox-group>
				</view>
			</view>
			<view class="row">
				<view class="label">
					交通
				</view>
				<view class="value">
					<u--input placeholder="例如：地铁1号线XX站" v-model="form.traffic" border="surround"></u--input>
				</view>
			</view>
			<view class="row">
				<view class="label">
					合租/整租
				</view>
				<view class="value">
					<u--input placeholder="例如：整租" v-model="form.rental" border="surround"></u--input>
				</view>
			</view>
			<view class="row">
				<view class="label">
					看房时间
				</view>
				<view class="value">
					<u--input placeholder="例如：随时/周末/工作日等" v-model="form.time" border="surround"></u--input>
				</view>
			</view>
			<view class="row">
				<view class="label">
					房屋介绍
				</view>
				<view class="value">
					<u--input placeholder="请输入" v-model="form.des" @focus="navigatorDes" border="surround"></u--input>
				</view>
			</view>
			<view class="row">
				<view class="label">
					联系方式
				</view>
				<view class="value">
					<u--input placeholder="请输入" v-model="form.phone" border="surround"></u--input>
				</view>
			</view>
			<view class="row">
				<view class="label">
					房源图片 
				</view>
				<view class="value">
					<text style="font-size: 28rpx;">(最多上传10张)</text>
				</view>
				<view class="value-row">
					<view class="image-container">
						<view class="image" v-for="(item,index) of form.images" :key="index">
							<image :src="item" mode="scaleToFill" style="width: 162rpx;height: 162rpx;"></image>
							<view class="eye">
								<u-icon name="eye-fill" size="40" @click="preview(item)"></u-icon>
							</view>
							<view class="close">
								<u-icon name="plus-circle" size="30" @click="delFile(index)"></u-icon>
							</view>
						</view>
						<view class="image" v-if="form.images && form.images.length < 10">
							<view class="image-upload">
								<image src="/static/images/comment/image.png" mode="widthFix"
									style="width: 82rpx;height: 82rpx;" @click="upload"></image>
								<view class="">
									添加图片
								</view>
							</view>
					
						</view>
					</view>
				</view>
			</view>
			<bottomComponent>
				<view class="bottom-btn" @click="submitHandler">
					发布
				</view>
			</bottomComponent>
		</view>
	</view>

</template>

<script>
	import bottomComponent from "@/components/bottomComponent/index.vue"
	import homeHeader from "@/components/home_header/index.vue"
	import storage from "@/utils/storage.js"
	import utils from "@/utils/common.js"
	
	import {taskSave} from "@/api/task.js"
	export default {
		components: {
			bottomComponent,
			homeHeader
		},
		data(){
			return {
				form: {
					facilities: [],
					images: [],
					des: '',
					rooms: '1',
					hall: '1',
					metre: '1',
					floor: '1',
					total_floor: '1'
				},
				facilitiesDicData: [{
					label: '毛坯'
				},{
					label: '简单装修'
				},{
					label: '精装修'
				},{
					label: '冰箱'
				},{
					label: '电视'
				},{
					label: '暖气'
				},{
					label: '洗衣机'
				},{
					label: '热水器'
				},{
					label: '衣柜'
				},{
					label: '书桌'
				},{
					label: '空调'
				},{
					label: '宽带'
				},{
					label: '沙发'
				},{
					label: '餐桌'
				},{
					label: '厨房'
				},{
					label: '阳台'
				},{
					label: '燃气灶'
				},{
					label: '橱柜'
				}]
			}
		},
		onShow() {
			this.form.des = storage.get_house_des()
		},
		methods: {
			navigatorDes(){
				storage.set_house_des(this.form.des)
				uni.navigateTo({
					url: "/pages/house_des/index"
				})
			},
			// 新增图片
			upload() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: async (res) => {
						console.log(res.tempFilePaths)
						const result = await utils.uploadFileToOss(res.tempFilePaths[0])
						this.form.images.push(result)
					}
				});
			},
			delFile(index) {
				this.form.images.splice(index, 1)
			},
			preview(url) {
				uni.previewImage({
					urls: [url]
				})
			},
			submitHandler(){
				if(!this.form.name){
					uni.showToast({
						title: "请输入岗位名称",
						icon: "none"
					})
					return
				}
				if(this.form.images.length == 0){
					uni.showToast({
						title: "请上传房屋图片",
						icon: "none"
					})
					return
				}
				const role_type = storage.get_user_role()
				if(!role_type){
					uni.showToast({
						title: "请切换有权限的角色",
						icon: "none"
					})
					return
				}
				taskSave({
					task_type: "task_house",
					role_type: role_type,
					...this.form,
					images: JSON.stringify(this.form.images),
					facilities: JSON.stringify(this.form.facilities)
				})
				.then(res => {
					uni.navigateTo({
						url: "/pages/success/index"
					})
				})
			}
		}
	}
</script>

<style>
	page {
		background: #649CF6 linear-gradient(360deg, #fff 0%, #ECF3FF 60%, #F1F6FF 96%, #F1F6FF 100%);
		padding-bottom: 100rpx;
	}
	.u-checkbox-group{
		flex-wrap: wrap;
		align-items: center;
	}
	.u-checkbox{
		width: 25%;
		margin-bottom: 10rpx;
	}
</style>
<style scoped lang="scss">
	.container {
		margin: 30rpx auto 160rpx;
		width: 730rpx;
		padding: 18rpx 28rpx 28rpx;
		background-color: #fff;
		box-sizing: border-box;

		.row {
			display: flex;
			padding-top: 10rpx;
			align-items: center;
			flex-wrap: wrap;
			.label {
				margin-right: 20rpx;
				width: 170rpx;
				text-align: justify;
				text-align-last: justify;
				/*兼容ie*/
				text-justify: distribute-all-lines;
				font-weight: 500;
				font-size: 34rpx;
				color: #000000;
				line-height: 52rpx;
			}
			.value{
				flex: 1;
			}
			.value-row{
				margin-top: 10rpx;
				width: 100%;
				.image-container {
					display: flex;
					flex-wrap: wrap;
				
					.image {
						position: relative;
						margin-right: 20rpx;
						margin-bottom: 20rpx;
						border-radius: 8rpx;
						border: 2rpx dotted #4A84F4;
						text-align: center;
						font-weight: 500;
						font-size: 23rpx;
						color: #9C9C9C;
						line-height: 34rpx;
						overflow: hidden;
				
						.image-upload {
							padding: 20rpx 40rpx;
						}
				
						.eye {
							position: absolute;
							left: 0;
							right: 0;
							top: 0;
							bottom: 0;
							display: flex;
							align-items: center;
							justify-content: space-around;
						}
				
						.close {
							width: 200rpx;
							height: 46rpx;
							position: absolute;
							right: -82rpx;
							top: -4rpx;
							background-color: rgba(255, 255, 255, .6);
							display: flex;
							align-items: center;
							justify-content: space-around;
							transform: rotateZ(45deg);
						}
					}
				}
			}
		}

		.row+.row {
			padding-top: 20rpx;
			margin-top: 10rpx;
			border-top: 2rpx solid #F5F5F5;
		}

		.title {
			margin-top: 20rpx;
			font-weight: 500;
			font-size: 34rpx;
			color: #000000;
			line-height: 52rpx;
		}
	}

	.bottom-btn {
		width: 630rpx;
		line-height: 86rpx;
		background: #2B5BF8;
		border-radius: 86rpx;
		font-weight: 500;
		font-size: 38rpx;
		color: #FFFFFF;
		text-align: center;
	}
</style>